<template>
	<view class="pageBg">
		<view class="headerDate margin_b32 flex_r_sb_c">
			<view class="">
				<text class="f_64 fw_600 tc_1">{{todayInfo.year}}</text>
				<view class="f_28 fw_600 tc_1 flex_r_fs_c">
					<text class="margin_r16">{{todayInfo.monthDay}}</text>
					<text>{{todayInfo.week}}</text>
				</view>
				<text class="f_28 fw_600 tc_9">{{lunarData.yinli}}</text>
			</view>
			<view class="headerHour shadowBox flex_c_c_c">
				<text class="f_48 fw_600 tc_6 margin_b8">{{todayInfo.lunarHour}}</text>
				<text class="f_28 fw_400 tc_6">{{curTime || 'xx:xx'}}</text>
			</view>
			<view class="headerWea shadowBox flex_r_c_c">
				<text class="tc_6" :class="['weaIcon', 'iconfont', weatherInfo.wea_img_icon]" style="font-size:140rpx"></text>
			</view>
		</view>
		<view class="secondLine margin_b32 flex_r_sb_c">
			<view class="secondLeft flex_c_fs_fs">
				<view class="secondBig shadowBox margin_b32 flex_c_fs_c">
					<text class="f_40 fw_600 tc_r margin_b28">日兆·宜</text>
					<view class="yijiCnt flex_c_fs_c flex_w">
						<block v-for="(item, index) in lunarData.yiArr" :key="index">
							<view class="yijiItem flex_c_c_c">
								<text class="f_28 fw_500 tc_6">{{item}}</text>
							</view>
						</block>
					</view>
				</view>
				<view class="secondBox shadowBox flex_c_fs_c">
					<text class="f_40 fw_600 tc_r margin_b28">今日五行</text>
					<view class="flex_c_c_c">
						<text class="f_32 fw_500 tc_6 margin_b8">{{lunarData.wuxing}}</text>
					</view>
				</view>
			</view>
			<view class="secondRight flex_c_fs_c">
				<view class="secondBox shadowBox margin_b32 flex_c_fs_c">
					<text class="f_40 fw_600 tc_r margin_b28">时辰预兆</text>
					<view class="flex_c_c_c">
						<text class="f_32 fw_500 tc_6 margin_b8">{{lunarData.chongsha}}</text>
						<text class="f_24 fw_400 tc_8">{{todayInfo.hour + ':00-' + todayInfo.hour + ':59'}}</text>
					</view>
				</view>
				<view class="secondBig shadowBox flex_c_fs_c">
					<text class="f_40 fw_600 tc_r margin_b28">日兆·忌</text>
					<view class="yijiCnt flex_c_fs_c flex_w">
						<block v-for="(item, index) in lunarData.jiArr" :key="index">
							<view class="yijiItem flex_c_c_c">
								<text class="f_28 fw_500 tc_6">{{item}}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="baiji shadowBox margin_b32 flex_c_fs_c">
			<text class="f_40 fw_600 tc_r margin_b28">彭祖百忌</text>
			<view class="">
				<text class="f_28 fw_500 tc_6">{{lunarData.baiji}}</text>
			</view>
		</view>
		<view class="shenBox flex_r_sb_c">
			<view class="shenItem shadowBox flex_c_fs_c">
				<text class="f_40 fw_600 tc_r margin_b28">吉神宜趋</text>
				<view class="shenCnt flex_c_fs_c flex_w">
					<block v-for="(item, index) in lunarData.jishenArr" :key="index">
						<view class="shenCntItem flex_c_c_c">
							<text class="f_28 fw_500 tc_6">{{item}}</text>
						</view>
					</block>
				</view>
			</view>
			<view class="shenItem shadowBox flex_c_fs_c">
				<text class="f_40 fw_600 tc_r margin_b28">凶神宜忌</text>
				<view class="shenCnt flex_c_fs_c flex_w">
					<block v-for="(item, index) in lunarData.xiongshenArr" :key="index">
						<view class="shenCntItem flex_c_c_c">
							<text class="f_28 fw_500 tc_6">{{item}}</text>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lunarData: {},
				todayInfo: {},
				curTime: '',
				weatherInfo: {},
				refresh: false,
			};
		},
		onLoad(res) {
			this.getLocalData()
			this.getWeather()
			this.initTime()
		},
		methods: {
			getLocalData() {
				const today = this.$tool.getDate('date')
				const todayArr = today.split('-')
				this.todayInfo = {
					year: todayArr[0],
					monthDay: todayArr[1] + '月' + todayArr[2] + '日',
					week: this.$tool.getWeek(),
					lunarHour: this.$tool.time2Lunar()
				}
				let lunarData = uni.getStorageSync('moon|lunar') || null
				if(lunarData && lunarData.date === today) {
					this.lunarData = lunarData.data
				} else {
					this.getRemoteData()
				}
			},
			getRemoteData() {
				const _this = this
				const today = _this.$tool.getDate('date')
				const key = '98912830a4aa64d32e4bcd460f59592d'
				const url = 'https://v.juhe.cn/laohuangli/d?date=' + today + '&key=' + key
				_this.$api.get({
					url: url,
					loadingTip: this.refresh ? '获取数据中...' : '',
					data: {},
					success: res => {
						let resCopy = res.result
						resCopy.yiArr = resCopy.yi.split(' ')
						resCopy.jiArr = resCopy.ji.split(' ')
						resCopy.jishenArr = resCopy.jishen.split(' ')
						resCopy.xiongshenArr = resCopy.xiongshen.split(' ')
						const data = {
							date: resCopy.yangli,
							data: resCopy,
						}
						uni.setStorageSync('moon|lunar', data)
						_this.lunarData = res.result
					},
					fail: err => {}
				})
			},
			getWeather() {
				this.weatherInfo = uni.getStorageSync('moon|weather').data
			},
			initTime() {
				const _this = this
				const hour = new Date().getHours()
				_this.todayInfo.hour = hour
				hour >= 6 && hour <= 18 ? _this.isMorning = true : _this.isMorning = false
				_this.curTime = _this.formatTime(new Date())
				
				setInterval(function() {
					const hour = new Date().getHours()
					_this.todayInfo.hour = hour
					hour >= 6 && hour <= 18 ? _this.isMorning = true : _this.isMorning = false
					_this.curTime = _this.formatTime(new Date())
				}, 10 * 1000)
			},
			formatTime(e) {
				let hour = ('0' + (e.getHours())).slice(-2)
				let minute = ('0' + (e.getMinutes())).slice(-2)
				let time = hour + ':' + minute
				return time
			},
		},
	}
</script>

<style lang="scss" scoped>
.pageBg {
	padding: 28rpx;
	box-sizing: border-box;
	.headerDate {
		.headerHour {
			width: 148rpx;
			height: 164rpx;
		}
		.headerWea {
			width: 240rpx;
			height: 164rpx;
		}
	}
	.secondLine {
		.secondBig {
			width: 328rpx;
			height: 352rpx;
			padding: 28rpx 0 10rpx;
			box-sizing: border-box;
			.yijiCnt {
				width: 100%;
				height: 232rpx;
				overflow: hidden;
				.yijiItem {
					width: 110rpx;
				}
			}
		}
		.secondBox {
			width: 328rpx;
			height: 220rpx;
			padding: 28rpx 0;
			box-sizing: border-box;
		}
	}
	.baiji {
		width: 100%;
		height: 200rpx;
		padding: 28rpx 0;
		box-sizing: border-box;
	}
	.shenBox {
		width: 100%;
		height: 500rpx;
		.shenItem {
			width: 328rpx;
			height: 100%;
			padding: 28rpx 0;
			box-sizing: border-box;
			.shenCnt {
				width: 100%;
				height: 360rpx;
				overflow: hidden;
				.shenCntItem {
					width: 110rpx;
				}
			}
		}
	}
}
.shadowBox {
	background: #F2F2F2;
	box-shadow: -10rpx -10rpx 16rpx rgba(255, 255, 255, 0.76), 6rpx 6rpx 24rpx #E4E4E4, inset 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.6), inset -1rpx -1rpx 2rpx rgba(255, 255, 255, 0.5);
	border-radius: 24rpx;
}
</style>
